<template>
  <j-modal
    :title="title"
    width="70%"
    :visible="value"
    switchFullscreen
    :okButtonProps="{ class: { 'jee-hidden': disableSubmit } }"
    @cancel="handleCancel"
    :cancelText="$t('button.closeTxt')"
  >
    <div>
      <div class="drawer">
        <div class="open-drop" @click="drawerVisible = !drawerVisible">
          <img class="icon" :src="drawerVisible ? img.right : img.left" />
          <span>{{ $t('popover.infoTxt') }}</span>
        </div>
        <transition name="top">
          <fmsx-form v-show="drawerVisible" class="top" ref="form" :model="model" :options="options"> </fmsx-form>
        </transition>
      </div>
      <consumables-assets-info-tabs
        v-if="pageType == 'Consumables'"
        ref="ConsumablesRef"
        :materialId="data.dictText.id"
        :defaultTabKey="data.tabType"
      />
    </div>
  </j-modal>
</template>

<script>
import wipApi from '@/api/fmsx/wip'
import ConsumablesAssetsInfoTabs from './components/ConsumablesAssetsInfoTabs.vue'

export default {
  components: {
    ConsumablesAssetsInfoTabs
  },
  props: {
    value: {
      type: Boolean,
      default: false
    },
    pageType: {
      type: String,
      required: true
    },
    data: {
      type: Object,
      default: {}
    },
    title: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      model: {},
      img: {
        left: require('@/assets/mo/icon-left2.png'),
        right: require('@/assets/mo/icon-right2.png')
      },
      disableSubmit: true,
      drawerVisible: false
    }
  },
  computed: {
    options () {
      if (this.pageType == 'Consumables') {
        return {
          details: true,
          isSubmitBtn: false,
          isEmptyBtn: false,
          group: [
            {
              icon: '',
              label: '',
              column: [
                {
                  label: '工单号',
                  prop: 'moNum',
                  span: 8
                },
                {
                  label: '客户代码',
                  prop: 'custCode',
                  type: 'input',
                  span: 8
                },
                {
                  label: '图号',
                  prop: 'dwgNo',
                  span: 8
                },
                {
                  label: '版本',
                  prop: 'rev',
                  span: 8
                },
                {
                  label: '工序号',
                  prop: 'operationNum',
                  span: 8
                },
                {
                  label: '工序编码',
                  prop: 'processId',
                  span: 8
                },
                {
                  label: '生产数量',
                  prop: 'productionQuantity',
                  span: 8
                },
                {
                  label: '库存数量',
                  prop: 'storageQuantity',
                  span: 8
                },
                {
                  label: '仓库',
                  prop: 'wmsId_dictText',
                  span: 8
                },
                {
                  label: '货架',
                  prop: 'shelvesId_dictText',
                  span: 8
                },
                {
                  label: '储位',
                  prop: 'storageId_dictText',
                  span: 8
                },
                {
                  label: '入库时间',
                  prop: 'entryTime',
                  span: 8
                },
                {
                  label: '入库申请人',
                  prop: 'entryBy',
                  span: 8
                },
                {
                  label: '操作时间',
                  prop: 'updateTime',
                  span: 8
                },
                {
                  label: '备注',
                  prop: 'remark',
                  type: 'textarea',
                  span: 16,
                  options: {
                    autoSize: { minRows: 3, maxRows: 5 }
                  }
                }
              ]
            }
          ]
        }
      }
    }
  },

  created () {
    this.model = this.data.dictText
    console.log(this.data.tabType, '963969696')
    if (this.data.tabType == '2' && this.data.key) {
      this.drawerVisible = true
    }
  },
  methods: {
    handleCancel () {
      this.model = {}
      this.$emit('input', false)
    }
  }
}
</script>

<style lang="less" scoped>
/deep/ .ant-modal-body {
  padding-top: 0;
}
.drawer {
  .open-drop {
    background-color: #d5e9ff;
    margin: 0 auto;
    width: 100px;
    height: 20px;
    border-bottom-right-radius: 16px;
    border-bottom-left-radius: 16px;
    color: #307ddb;
    text-align: center;
    font-size: 12px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center;
    cursor: pointer;
    .icon {
      width: 16px;
      height: 16px;
      transform: rotate(-90deg);
    }
  }

  .top-enter,
  .top-leave-to {
    opacity: 0;
    // height: 0;
  }

  .top-enter-active,
  .top-leave-active {
    transition: all 0.3s ease-in-out;
  }
}
</style>
